<template>
  <!-- 批量导入弹窗 -->
  <vc-dialog v-model="show" width="680px" height="480px" title="批量导入" title-align="left" :closeOnClickOverlay="false">
    <page-loading text="导入中" target=".batch-import-dialog" :loading="loading"></page-loading>
    <div class="container batch-import-dialog">
      <div class="file-import wrapper">
        <div class="title">
          <span>文件导入</span>
          <el-tooltip placement="bottom-start" effect="light" :teleported="false">
            <vc-svg class="icon-question" name="question" size="15" color="#02C680"></vc-svg>
            <template #content>
              <div style="color: #666">
                <p>EXCEL批量导入说明：</p>
                <p>1、导入仅支持EXCEL格式，首行开始，每行一个对象，具体可见下载样例。</p>
                <p>2、导入对象类型支持：企业名称（企业名称要与工商登记的一致）。</p>
                <p>3、EXCEL仅识别第一个SHEET的第一列。</p>
                <p>4、最终导入结果不包含“导入结果失败”的企业。</p>
                <p>5、最终导入企业数量不超过上限（500）。</p>
              </div>
            </template>
          </el-tooltip>
        </div>
        <el-upload
          class="upload-wrapper"
          action=""
          drag
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="
            (file:any, fileList:any) => {
              handleFileChange(file, fileList, emit);
            }
          "
        >
          <i class="icon-upload"></i>
          <div class="upload-text">点击或将文件拖拽到这里上传</div>
          <div class="upload-tip">·上传文件不超过2M,仅支持Excel(xlsx)文件 ·单次查询企业数量不能超过500家 ·企业名称要与工商登记的名称一致</div>
        </el-upload>
        <div class="file-import-tips">
          <span class="sub-title">注意事项</span>
          <span class="tip">
            1.
            <span class="download-template-btn" @click="downloadFileTemplate">下载模板</span>
            并填充企业名录信息
          </span>
          <span class="tip">2. 支持上传自定义企业名录，第一列需为企业名录含表头</span>
          <span class="example" @click="toggleExampleImageShow(true)">
            示例 
            <vc-svg name="image" size="16" color="#008EF4"></vc-svg>
          </span>
          <el-image-viewer v-if="showExampleImage" :url-list="[importExample]" :z-index="9999" :hide-on-click-modal="true" :teleported="true" @close="toggleExampleImageShow(false)"></el-image-viewer>
        </div>
      </div>
      <div class="txt-import wrapper">
        <div class="title">粘贴导入</div>
        <div class="txt-wrapper">
          <el-input v-model="importTxt" :autosize="{ minRows: 8, maxRows: 8 }" type="textarea" placeholder="请将企业名录信息文本复制粘贴在此处，进行导入" />
        </div>
        <div class="txt-btns">
            <span class="txt-btn txt-btn-clear" @click="clearImportTxt">清空</span>
            <span class="txt-btn txt-btn-confirm" @click="handleTxtImport(emit)">导入</span>
        </div>
      </div>
    </div>
  </vc-dialog>
</template>

<script setup lang="ts">
import { useBatchImportDialog } from '../useDialog';
import importExample from '@/assets/import-example.png';
import PageLoading from '@/components/page-loading/index.vue';
import { type ImportResult } from '../apis';

interface Props {
  modelValue: boolean;
}
const { modelValue } = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void;
  (e: 'success', val: ImportResult): void;
}>();

const show = computed({
  get() {
    return modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});

const { loading, handleFileChange, downloadFileTemplate, showExampleImage, toggleExampleImageShow, importTxt, clearImportTxt, handleTxtImport } = useBatchImportDialog();
</script>

<style lang="scss" scoped>
.container {
  .wrapper {
    margin: auto;
    .title {
      margin-top: 20px;
      padding-left: 18px;
      display: flex;
      align-items: center;
      gap: 5px;
      height: 26px;
      line-height: 26px;
      font-size: 16px;
      font-weight: 500;
      color: #333;
      border-left: 3px solid #02C680;
      .icon-question {
        position: relative;
        top: 2px;
        cursor: pointer;
      }
    }
    .upload-wrapper {
      :deep(.el-upload-dragger) {
        margin: auto;
        padding-top: 13px;
        height: 140px;
        width: 640px;
        background-color: rgba(2,198,128,0.03);
        border: 1px dashed rgba(2,198,128,0.3);
        border-radius: 8px;
      }
      .icon-upload {
        display: inline-block;
        width: 52px;
        height: 52px;
        background-image: url('');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .upload-text {
        font-size: 13px;
        font-weight: 600;
        color: #333;
      }
      .upload-tip {
        margin-top: 8px;
        font-size: 11px;
        font-weight: 400;
        color: #999999;
      }
    }
    .file-import-tips {
      display: flex;
      padding: 8px 20px;
      .sub-title {
        font-size: 12px;
        font-weight: 500;
        color: #333;
      }
      .tip {
        margin-left: 10px;
        font-size: 12px;
        color: #666;
        .download-template-btn {
          color: rgba(0, 142, 244, 1);
          cursor: pointer;
        }
      }
      .example {
        margin-left: 4px;
        display: flex;
        font-size: 12px;
        color: rgba(0, 142, 244, 1);
        cursor: pointer;
        :deep(i) {
          left: 4px;
          position: relative;
          top: 1px;
        }
      }
    }
    .txt-wrapper {
      margin: 8px 45px 20px 20px;
      width: 640px;
      height: 88px;
      background-color: rgba(2,198,128,0.03);
      border: 1px dashed rgba(2,198,128,0.3);
      border-radius: 8px;
      :deep(.el-textarea__inner) {
        padding: 14px 16px;
        font-size: 11px;
        font-weight: 400;
        color: #999999;
        resize: none;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        white-space: pre-line;
      }
    }
    .txt-btns {
        display: flex;
        justify-content: flex-end;
        height: 60px;
        border-top: 1px solid #F3F3F3;
        .txt-btn {
          height: 32px;
          margin-top: 12px;
          padding: 6px 16px;
          font-size: 14px;
          border-radius: 4px;
          cursor: pointer;
        }
        .txt-btn-clear {
          color: #000;
          background: #ffffff;
          border: 1px solid #e3e3e3;
        }
        .txt-btn-confirm {
          margin-left: 12px;
          margin-right: 16px;
          color: #fff;
          background: #02C680;
        }
      }
  }
}
</style>
